<template>
    <el-tabs v-model="activeTab" type="border-card" destroy-on-close="true">
        <!-- 笔记本信息 -->
        <el-tab-pane label="笔记本信息" name="notebook-info">
            <el-form
                ref="upNotebookRef"
                :label-position="formLabelPosition"
                label-width="140px"
                :model="upNotebook">
                <el-form-item
                    prop="id"
                    label="唯一码">
                    <el-input disabled v-model="upNotebook.id" />
                </el-form-item>

                <el-form-item
                    prop="name"
                    label="笔记本名称">
                    <el-input disabled v-model="upNotebook.name" />
                </el-form-item>

                <el-form-item
                    prop="path"
                    label="笔记本基准路径">
                    <el-input disabled v-model="upNotebook.path" />
                </el-form-item>

                <el-form-item
                    autosize
                    show-word-limit
                    maxlength="50"
                    prop="desc"
                    label="笔记本描述">
                    <el-input v-model="upNotebook.desc" type="textarea"/>
                </el-form-item>

                <el-form-item
                    prop="username"
                    label="同步用户"
                    :rules="[{
                            required: true,
                            message: '请输入网盘用户名',
                            trigger: 'blur',
                        }]">
                    <el-input v-model="upNotebook.username" />
                </el-form-item>

                <el-form-item
                    prop="password"
                    label="同步密码"
                    :rules="[{
                            required: true,
                            message: '请输入网盘同步密码',
                            trigger: 'blur',
                        }]">
                    <el-input v-model="upNotebook.password" type="password" show-password/>
                </el-form-item>

                <el-form-item
                    prop="syncaddr"
                    label="同步地址"
                    :rules="[{
                            required: true,
                            message: '请输入Webdav 地址',
                            trigger: 'blur',
                        }]">
                    <el-input v-model="upNotebook.syncaddr" type="syncaddr"/>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="checkUpdateForm()"> 更 新 </el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>

        <!-- 新增笔记本信息 -->
        <el-tab-pane label="新增笔记本" name="new-notebook">
            <el-form
                ref="newNotebookRef"
                :label-position="formLabelPosition"
                label-width="140px"
                :model="notebook">
                <el-form-item
                    prop="name"
                    label="笔记本名称"
                    :rules="[{
                            required: true,
                            message: '请输入笔记本名称',
                            trigger: 'blur',
                        }]">
                    <el-input v-model="notebook.name" />
                </el-form-item>

                <el-form-item
                    prop="path"
                    label="笔记本基准路径"
                    :rules="[{
                            required: true,
                            message: '请输入笔记本基准路径',
                            trigger: 'blur',
                        }]">
                    <el-input v-model="notebook.path" />
                </el-form-item>

                <el-form-item
                    autosize
                    show-word-limit
                    maxlength="50"
                    prop="desc"
                    label="笔记本描述">
                    <el-input v-model="notebook.desc" type="textarea"/>
                </el-form-item>

                <el-form-item
                    prop="username"
                    label="同步用户"
                    :rules="[{
                            required: true,
                            message: '请输入网盘用户名',
                            trigger: 'blur',
                        }]">
                    <el-input v-model="notebook.username" />
                </el-form-item>

                <el-form-item
                    prop="password"
                    label="同步密码"
                    :rules="[{
                            required: true,
                            message: '请输入网盘同步密码',
                            trigger: 'blur',
                        }]">
                    <el-input v-model="notebook.password" type="password" show-password/>
                </el-form-item>

                <el-form-item
                    prop="syncaddr"
                    label="同步地址"
                    :rules="[{
                            required: true,
                            message: '请输入Webdav 地址',
                            trigger: 'blur',
                        }]">
                    <el-input v-model="notebook.syncaddr" type="syncaddr"/>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="checkNewForm()"> 保 存 </el-button>
                    <el-button @click="reset()"> 清 空 </el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import {ref, reactive, toRefs, onMounted} from "vue";
    export default ({
        props:['asideTransfer'],

        methods: {
            checkUpdateForm: function() {
                this.$refs.upNotebookRef.validate((valid, fields) => {
                    this.update(valid, fields);
                })
            },

            checkNewForm: function() {
                this.$refs.newNotebookRef.validate((valid, fields) => {
                    this.save(valid, fields);
                })
            }
        },

        setup(props, {emit}) {
            const LUCIDITY_NOTE_APP_NOTEBOOK = reactive({
                activeTab: ref("notebook-info"),
                formLabelPosition: 'right',
                notebook: {},
                upNotebook: props.asideTransfer.notebook,
            });

            // 保存笔记本
            const save = (valid, fields) => {
                if (valid) {
                    var newNotebook = LUCIDITY_NOTE_APP_NOTEBOOK.notebook;
                    newNotebook.id = LucidityNoteApp.Helper.uuid(12, 62);
                    LucidityNoteApp.Helper.net.post(
                        "/notebook/new",
                        newNotebook,
                        (success) => {
                            ElementPlus.ElMessage({
                                type: "success",
                                message: success.message
                            });
                            // 新增笔记本之后，将新增的笔记本返回
                            emit("reload-notebook", {action:"new", notebook: success.data});
                        },
                        (error) => {ElementPlus.ElMessage.error(error.message)}
                    );
                } else {
                    ElementPlus.ElMessage.error("不符合要求的表单项,请检查");
                }
            };

            // 清空信息
            const reset = () => {
                LUCIDITY_NOTE_APP_NOTEBOOK.notebook = {}
            };

            // 当前笔记本更新
            const update = (valid, fields) => {
                if (valid) {
                    LucidityNoteApp.Helper.net.put(
                        "/notebook/update",
                        LUCIDITY_NOTE_APP_NOTEBOOK.upNotebook,
                        (success) => {
                            ElementPlus.ElMessage({
                                type: "success",
                                message: success.message
                            });
                            // 触发更新下拉框所有的信息： 传递事件到父组件重新加载笔记本信息
                            emit("reload-notebook", {action:"update", notebook: success.data});
                        },
                        (error) => {ElementPlus.ElMessage.error(error.message)}
                    );
                } else {
                    ElementPlus.ElMessage.error("不符合要求的表单项,请检查");
                }
            };

            return {
                ...toRefs(LUCIDITY_NOTE_APP_NOTEBOOK),
                save,
                reset,
                update
            }
        }
    })
</script>

<style>
</style>